<template>
  <div>
    <el-form class="query-table-form" @submit.native.prevent :inline="true" :model="params">
      <el-form-item>
        <el-input
          v-model="params.agency_name"
          placeholder="机构名称查询"
          clearable
          @change="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="params.contact"
          placeholder="联系人查询"
          clearable
          @change="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <select-address
          v-model="params.address_code"
          placeholder="地址查询"
          auto-top
          clearable
          @change="getData()"
        ></select-address>
      </el-form-item>
      <el-form-item>
        <c-select
          :options="enumCaptialAgencyType"
          v-model="params['agency_type.eq']"
          clearable
          @change="getData()"
          placeholder="机构类型"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
      <el-form-item class="float-right">
        <el-button type="primary" @click="handleEdit()" icon="el-icon-plus">新增</el-button>
      </el-form-item>
    </el-form>

    <c-table
      border
      v-loading="loading"
      :stripe="false"
      :columns="tableColumns"
      :data="tableData"
    ></c-table>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <capital-edit-dialog
      :visible.sync="editVisible"
      :form-data="editRow"
      @success="getData()"
    ></capital-edit-dialog>

    <!-- <capital-edit-history :visible.sync="viewVisible"
                          ref="history"
                          :rowId="rowId"></capital-edit-history> -->

    <capital-record
      :visible.sync="recordVisible"
      @success="getHistory()"
      :form-data="recordData"
      table-id=""
    ></capital-record>

    <capital-record-list
      :visible.sync="viewVisible"
      ref="history"
      :row-id="rowId"
    ></capital-record-list>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { enumCaptialAccountType, enumCaptialAgencyType } from '@/credit/plugins/enum'

import SelectAddress from '@/components/select/SelectAddress'
import CapitalEditDialog from '@/credit/views/city/settle/capital/CapitalEditDialog'
import { pureDot } from '@/common/filters/pure'
// import CapitalEditHistory from '@/credit/views/city/settle/capital/CapitalEditHistory'
import CapitalRecord from '@/credit/views/city/settle/capital/CapitalRecord'
import CapitalRecordList from '@/credit/views/city/settle/capital/CapitalRecordList'
export default {
  components: {
    SelectAddress,
    CapitalEditDialog,
    // CapitalEditHistory,
    CapitalRecord,
    CapitalRecordList,
  },
  props: {},
  data() {
    return {
      enumCaptialAgencyType,
      refundStatusSelected: '',
      params: {
        index: 1,
        size: 15,
        agency_name: '',
        contact: '',
        'agency_type.eq': '',
      },
      order: {
        create_time: 'desc',
      },
      loading: false,
      tableName: 'credit_agency_capital_view',
      tableColumns: [
        { attrs: { label: '类型', prop: 'agencyType', align: 'center' } },
        { attrs: { label: '机构名称', prop: 'agency_name', minWidth: 120 } },
        { attrs: { label: '地址', prop: 'address', align: 'center', minWidth: 100 } },
        { attrs: { label: '联系人', prop: 'contact', align: 'center' } },
        { attrs: { label: '联系电话', prop: 'mobile_no', align: 'center', width: 120 } },
        { attrs: { label: '银行账户', prop: 'bank_account', align: 'center' } },
        { attrs: { label: '开户行', prop: 'bank_name', align: 'center' } },
        { attrs: { label: '开户行地址', prop: 'bank_address', align: 'center' } },
        { attrs: { label: '账户类型', prop: 'accountType', align: 'center' } },
        { attrs: { label: '初始金额', prop: 'init_funds', align: 'center' } },
        { attrs: { label: '当前余额', prop: 'current_funds', align: 'center' } },
        {
          attrs: { label: '操作', align: 'center', minWidth: 130 },
          operations: [
            {
              content: '对账',
              icon: 'fa fa-legal',
              event: this.handleRecord,
            },
            {
              content: '修改',
              icon: 'fa fa-edit',
              event: this.handleEdit,
            },
            {
              content: '查看',
              icon: 'fa fa-search',
              event: this.handleView,
            },
          ],
        },
      ],
      tableData: [],
      totalCount: 0,

      editVisible: false,
      editRow: {},

      viewVisible: false,
      rowId: '',

      recordVisible: false,
      recordData: {},
    }
  },
  computed: {
    ...mapGetters(['clientId', 'user', 'job']),
  },
  watch: {},
  created() {
    this.getData()
  },
  mounted() {},
  methods: {
    getHistory() {
      this.$refs.history.getData()
      this.getData()
    },
    async getData(index = 1) {
      this.params.index = index
      this.loading = true
      const [res] = await this.$utils.promise(
        this.$api.getData(this.$serviceName, this.tableName, this.params, this.order)
      )
      this.loading = false

      const data = (res && res.data) || {}
      this.totalCount = data.totalCount || 0
      this.tableData = (data.data || []).map(this.dataAdapter)
    },
    dataAdapter(item) {
      item.agencyType = enumCaptialAgencyType[item.agency_type] || '-'
      item.accountType = enumCaptialAccountType[item.account_type] || '-'
      item.init_funds = pureDot(item.init_funds)
      item.current_funds = pureDot(item.current_funds)

      return item
    },
    handleEdit(row = {}) {
      this.editRow = row
      this.editVisible = true
    },
    handleView(row = {}) {
      this.rowId = row.credit_agency_capital_id || ''
      this.viewVisible = true
    },
    handleRecord(row = {}) {
      this.recordData = { ...row }
      this.recordVisible = true
    },
  },
}
</script>

<style lang="scss" scoped></style>
